<!--  frame 经销商订单 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>经销商订单</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  /*background-color:#F8F8F8;*/
	}
	/* pages/agency/agency_order.wxss */

	/* 菜单导航 */

	.nav {
		position:fixed;
		top:0;
	  width: 100%;
	  display: flex;
	  height: 1.00rem;
	  line-height: 1.00rem;
	  justify-content: space-around;
	  background-color: #fff;
	}

	.nav_item {
	  position: relative;
	  height: 1.00rem;
	}

	.nav_title {
	  font-size: .30rem;
	  color: #999;
	}

	.item_box {
	  display: flex;
		align-items: center;
	}

	.down_jiantou {

	  height: .40rem;
	  width: .35rem;
	  line-height: .40rem;
	  font-size: .20rem;
	  color: #999;
	  transform: rotate(90deg);
	  margin-top: .15rem;
	}

	.active {
	  color: #333;
	}

	.xiahuaxian {
	  position: absolute;
	  left: -.05rem;
	  right: -.05rem;
	  bottom: 0;
	  height: .02rem;
	  border-radius: 1px;
	  background-color: #ff502d;
	}

	/*订单列表  */

	.section {
	  background: #f5f5f5;
	}

	.mr_b_15 {
	  margin-bottom: .15rem;
	}

	.mr_r_10 {
	  margin-right: .10rem;
	}

	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	}

	.order1 {
	  padding-top: .20rem;
	}

	.order_bar {
	  display: flex;
	  height: 1.00rem;
	  line-height: 1.00rem;
	  padding: 0 .35rem 0 .30rem;
	  background-color: #fff;
	  border-bottom: 1px solid #eee;
	}

	.order_b_l1 {
	  display: flex;
	  height: 1.00rem;
	}

	.order_title, .d_pay {
	  font-size: .28rem;
	  color: #666;
	  margin-right: .10rem;
	}

	.order_num {
	  font-size: .24rem;
	  color: #999;
	}

	.order_b_r {
	  font-size: .30rem;
	  color: #ff502d;
	}

	.order_info {
	  min-height: 2.85rem;
	  background-color: #fff;
	}

	.up_part {
	  display: flex;
	  height: 1.77rem;
	  align-items: center;
	  border-bottom: 1px solid #eee;
	}

	.up_left {
	  height: 1.20rem;
	  width: 1.20rem;
	  border-radius: .10rem;
	  margin: 0 .20rem 0 .27rem;
	}

	.up_center {
	  flex: auto;
	}

	.shop_title, .up_price, .return_title {
	  height: .28rem;
	  line-height: .28rem;
	  font-size: .28rem;
	  color: #666;
	}

	.shop_color, .up_num, .receive_addr {
	  height: .24rem;
	  line-height: .24rem;
	  font-size: .24rem;
	  color: #999;
	}

	.up_right {
	  text-align: right;
	  margin-right: .38rem;
	  margin-bottom: .45rem;
	}

	.down_part {
	  display: flex;
	  min-height: .68rem;
	  align-items: center;
	  padding: 0 .20rem 0 .26rem;
	}

	.down_part_l {
	  flex: auto;
	  font-size: .24rem;
	  color: #999;
	  padding-left: .04rem;
	}

	.d_price {
	  font-size: .32rem;
	  color: #333;
	  font-weight: 800;
	}

	.down_part_r {
	  display: flex;
	  align-items: center;
	  margin-right: .10rem;
	}

	.retuen_cash {
	  font-size: .32rem;
	  color: #ff502d;
	  font-weight: 800;
	}

	.bg {
	  opacity: 0.7;
	}
	.modal{
	  position: fixed;
	  height: 100%;
	  width: 100%;
	  background: rgba(0,0,0,0.8);
	  top: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.modal-content{
	  width: 80%;
	  min-height: 2.00rem;
	  background: #fff;
	}
	.titles{
	  height: .80rem;
	}
	.time-row{
		height: 1rem;
		display: flex;
		align-items:center;
		}
	.time-btn{
		margin-top: 0.2rem;
		padding-top: 0.2rem;
		border-top: solid #F8F8F8 1px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	</style>
</head>
<body>
	<div class="content app" v-cloak>

		<!-- 菜单导航栏 -->
		<div class="nav">
		  <div class="nav_item" @click="getAllOrder" data-index="0">
		    <div :class=" num==0?'active nav_title':'nav_title'">全部</div>
		    <div :class="num==0?'xiahuaxian':''"></div>
		  </div>
		  <div class="nav_item" @click="showDateModal">
		    <div class="item_box">
		      <div :class="  num==1?'active nav_title':'nav_title' ">时间</div>
		      <div class="iconfont iconxiayibu down_jiantou"></div>
		    </div>
		    <div :class="num==1? 'xiahuaxian': '' "></div>
		  </div>
		  <div class="nav_item ">
		    <picker mode="selector" range="{{types}}" range-key="name" @click="bindTyps" value="{{types}}">
		      <div class="item_box">
		        <div :class=" num==2?'active nav_title':'nav_title'">类型</div>
		        <div class="iconfont iconxiayibu down_jiantou"></div>
		      </div>
		    </picker>
		  </div>
		  <div class="nav_item">
		    <picker mode="selector" range="{{states}}" range-key="name" @click="bindState" value="{{states}}">
		      <div class="item_box">
		        <div :class=" num==2?'active nav_title':'nav_title'">状态</div>
		        <div class="iconfont iconxiayibu down_jiantou"></div>
		      </div>
		    </picker>
		  </div>
		  <div class="nav_item ">

		    <picker mode="selector" range="{{areans}}" range-key="cityName" @click="bindArean" value="{{index}}">
		      <div class="item_box">
		        <div :class=" num==4?'active nav_title':'nav_title'">区域</div>
		        <div class="iconfont iconxiayibu down_jiantou"></div>
		      </div>
		    </picker>


		  </div>
		</div>
		<div style="height:1rem;"></div>
		<!-- 订单列表 -->
		<div class="section">
		  <div class="scroll-div" scroll-y="true" bindscrolltolower="getMore" style="height:{{height}}">
		    <div class="order1" v-for="(item,index) in lists" :key="index">
		      <div class="order_bar">
		        <div class="order_b_l1">
							<div class="order_title">订单号：</div>
							<div class="order_num">{{item.id}}</div>
		        </div>
		        <block>
		          <div class="order_b_r" v-if="item.status==1">待发货</div>
		          <div class="order_b_r b_color" v-if="item.status==2">已完成</div>
		        </block>
		      </div>
		      <div class="order_info">
		        <div class="up_part" bindtap="openOrderDetail" data-status="{{item.status}}" v-for="(item,index) in item.item" :key="index"
		          hover-class="bg">
		          <image class="up_left" :src="item.image_center"></image>
		          <div class="up_center">
		            <div class="shop_title mr_b_15" style="max-width: 90%;">{{item.product_name}}</div>
		          </div>
		          <div class="up_right">
		            <div class="up_price mr_b_15">¥{{item.unit_price||0}}</div>
		            <div class="up_num">×{{item.nums||0}}</div>
		          </div>
		        </div>
		        <div class="receive_addr" style="padding: 0 .26rem;padding-top: .20rem;display: flex;">
		          <div>收货地址: </div>
		          <div> {{item.express_address||''}}</div>
		        </div>
		        <div class="down_part">
		          <div class="down_part_l">{{item.createtime}}</div>
		          <div class="down_part_r">
		            <div class="return_title mr_r_10">返现金额：</div>
		            <div class="retuen_cash">{{item.return_cash||0}}元</div>
		          </div>
		        </div>
		      </div>
		    </div>
		    <div v-if="lastPage" style="color: #999;font-size: .24rem;text-align: center;padding: .40rem;">已全部加载</div>

		  </div>
		</div>
		<!-- <div class="modal" v-if="showDate">
		  <div class="modal-content color-333">
		    <div class="titles flex-center color-333 fw-700 fs-30 br-b">时间筛选</div>
		    <div class="br-b pd-20">
		        <picker class="pd-20" mode="date"  bindchange="startActiveDate" value="{{index}}">
		            开始日期: <text class="fs-26 pd-l-20 color-666">{{startTime?startTime:'点击选择开始日期'}}</text>
		        </picker>
		        <picker  class="pd-20" mode="date" start="{{startTime}}" bindchange="endActiveDate" value="{{index}}">
		            结束日期: <text class="fs-26 pd-l-20 color-666">{{endTime?endTime:'点击选择结束日期'}}</text>
		        </picker>
		    </div>
		    <div  class="flex-center titles" bindtap="closeDateModal"> 确定 </div>
		  </div>
		</div> -->


		<!-- 模态框 -->
		<div class="hhModal demo">
		  <div class="hhModalHeader">
		    <p class="hhModalTitle">时间筛选</p>
		    <a class="hhModalClose icon"></a>
		  </div>
		  <div class="hhModalContent">
				<div class="time-row" @click="onstartTime()">
					<p style="width:1.5rem">开始日期: </p>
			    <p>{{startTime?startTime:'选择开始日期'}}</p>
				</div>
				<div class="time-row" @click="onendTime()">
					<p style="width:1.5rem">结束日期: </p>
			    <p>{{endTime?endTime:'选择结束日期'}}</p>
				</div>
				<div class="time-btn" @click="onqueding">
					确定
				</div>
		  </div>
		</div>


	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			    num: 0,
			    height: '',
			    lists: [],
			    page: 1,
			    size: 20,
			    types: [
			      { id: 1, name: '普通' ,index:0},
			      { id: 2, name: '预售' ,index:1},
			    ],
			    states: [
			      { id: 0, name: '未支付' ,index:0},
			      { id: 1, name: '等待发货' ,index:1},
			      { id: 2, name: '已发货' ,index:2},
			      { id: 3, name: '完成' ,index:3},
			      { id: 5, name: '已关闭' ,index:4},
			      { id: 6, name: '退款中' ,index:5},
			    ],
			    stateName: '状态',
			    typeName: '类型',
			    type: '',
			    state: '',
			    agent_id: api.pageParam.id,
			    areans: [],
			    showDate: false,
			    city_id: '',
			    startTime: '',
			    endTime: '',
					lastPage:'',
					bindTypsindex:0,//类型选择索引
					bindStateindex:0,//状态选择索引
					bindAreanindex:0,//区域选择索引
		},
		mounted: function(){

				this.getArean()
				this.getId()
				api.addEventListener({
							name: 'scrolltobottom',
							extra: {
									threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
							}
					}, function(ret, err) {
						 vm.getInfo(2);
					});
		},
		methods: {
			getArean: function (loader) {
				let param = {
					agent_id: this.agent_id
				}
				AjaxSafe({
						url:"/xapp/agent/agentCityList",
						data:param,
						loader:loader,
					success: function(res) {
						vm.areans = (res || []).map(item =>{
							item.name = item.cityName
							return item
						})
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
		},
		getId: function (loader) {
				AjaxSafe({
						url:"/xapp/agent/info",
						loader:loader,
					success: function(ret) {
						if (ret.state) {
								vm.agentId = ret.data.id
								vm.datas = ret.data
							  vm.getInfo();
						}
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
			},
			// 获取订单列表
			getInfo: function (init=1) {

				 if(init==1){
					 this.lists=[];
					 this.page=1
					 this.lastPage = false

				 }
				 if(this.startTime == this.endTime){
					 this.endTime = ''
				 }
				 let datas = {
					 agent_id: this.agentId,
					 city_id: this.city_id,
					 endTime: this.endTime,
					 startTime: this.startTime,
					 page: this.page,
					 size: this.size,
					 state: this.state,
					 type: this.type,
				 }
				 if (this.lastPage) {
					 return;
				 }

				 AjaxSafe({
			   		url:"/xapp/agent/agentOrderList",
			    	data:datas,
			    	loader:true,
					success: function(ret) {
						vm.lists= [...vm.lists, ...ret.list]
						vm.page= vm.page + 1
						vm.dataLength= ret.list.length
						vm.lastPage= ret.lastPage
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
			 },
			//  时间筛选
			 showDateModal(){
				 hhPanel.modal({
					    elm: ".demo",
					    init: function(ret){
					        Console(ret);
					    },
					    success: function(ret){
					        $(ret.elm).find(".time").text(Date.now());
					    }
					});
			 },
			//  选择开始时间
			onstartTime(){
				api.openPicker({
				    type: 'date_time',
						date:'yyyy-MM-dd',
				    title: '选择时间'
				}, function(ret, err) {
				    if (ret) {
							vm.startTime = ret.year+'-'+ret.month+'-'+ret.day
				        // alert(JSON.stringify(ret));
				    } else {
				        // alert(JSON.stringify(err));
				    }
				});
			},
			//  结束时间
			onendTime(){
				api.openPicker({
						type: 'date_time',
						date:'yyyy-MM-dd',
						title: '选择时间'
				}, function(ret, err) {
						if (ret) {
							vm.endTime = ret.year+'-'+ret.month+'-'+ret.day
								// alert(JSON.stringify(ret));
						} else {
								// alert(JSON.stringify(err));
						}
				});
			},
			// 时间范围  确定
			onqueding(){
				if(!this.startTime){
					api.toast({msg: '开始时间不能为空！',duration: 2000,location: 'middle'});
					return
				}
				if(!this.endTime){
					api.toast({msg: '结束时间不能为空！',duration: 2000,location: 'middle'});
					return
				}
				this.getInfo();
				hhPanel.closeAll();
			},
			// 类型筛选
			bindTyps(){
					var UIActionSelector = api.require('UIActionSelector');

					UIActionSelector.open({
							datas: vm.types,
							layout: {
									row: 5,
									col: 1,
									height: 30,
									size: 12,
									sizeActive: 14,
									rowSpacing: 5,
									colSpacing: 10,
									maskBg: 'rgba(0,0,0,0.2)',
									bg: '#fff',
									color: '#888',
									colorActive: '#f00',
									colorSelected: '#f00'
							},
							animation: true,
							cancel: {
									text: '取消',
									size: 12,
									w: 90,
									h: 35,
									bg: '#fff',
									bgActive: '#ccc',
									color: '#888',
									colorActive: '#fff'
							},
							ok: {
									text: '确定',
									size: 12,
									w: 90,
									h: 35,
									bg: '#fff',
									bgActive: '#ccc',
									color: '#888',
									colorActive: '#fff'
							},
							title: {
									text: '请选择',
									size: 12,
									h: 44,
									bg: '#eee',
									color: '#888'
							},
							actives:[vm.bindTypsindex],
							fixedOn: api.frameName
					}, function(ret, err) {
							if(ret.eventType == 'ok'){
								     vm.bindTypsindex = ret.selectedInfo[0].index
										 vm.type = ret.selectedInfo[0].id
										 vm.getInfo()
							}

				});
			},
			// 状态筛选
			bindState(){
					var UIActionSelector = api.require('UIActionSelector');

					UIActionSelector.open({
							datas: vm.states,
							layout: {
									row: 5,
									col: 1,
									height: 30,
									size: 12,
									sizeActive: 14,
									rowSpacing: 5,
									colSpacing: 10,
									maskBg: 'rgba(0,0,0,0.2)',
									bg: '#fff',
									color: '#888',
									colorActive: '#f00',
									colorSelected: '#f00'
							},
							animation: true,
							cancel: {
									text: '取消',
									size: 12,
									w: 90,
									h: 35,
									bg: '#fff',
									bgActive: '#ccc',
									color: '#888',
									colorActive: '#fff'
							},
							ok: {
									text: '确定',
									size: 12,
									w: 90,
									h: 35,
									bg: '#fff',
									bgActive: '#ccc',
									color: '#888',
									colorActive: '#fff'
							},
							title: {
									text: '请选择',
									size: 12,
									h: 44,
									bg: '#eee',
									color: '#888'
							},
							actives:[vm.bindStateindex],
							fixedOn: api.frameName
					}, function(ret, err) {
							if(ret.eventType == 'ok'){
										 vm.bindStateindex = ret.selectedInfo[0].index
										 vm.state = ret.selectedInfo[0].id
										 vm.getInfo()
							}

				});
			},
			// 区域筛选
			bindArean(){
					var UIActionSelector = api.require('UIActionSelector');

					UIActionSelector.open({
							datas: vm.areans,
							layout: {
									row: 5,
									col: 1,
									height: 30,
									size: 12,
									sizeActive: 14,
									rowSpacing: 5,
									colSpacing: 10,
									maskBg: 'rgba(0,0,0,0.2)',
									bg: '#fff',
									color: '#888',
									colorActive: '#f00',
									colorSelected: '#f00'
							},
							animation: true,
							cancel: {
									text: '取消',
									size: 12,
									w: 90,
									h: 35,
									bg: '#fff',
									bgActive: '#ccc',
									color: '#888',
									colorActive: '#fff'
							},
							ok: {
									text: '确定',
									size: 12,
									w: 90,
									h: 35,
									bg: '#fff',
									bgActive: '#ccc',
									color: '#888',
									colorActive: '#fff'
							},
							title: {
									text: '请选择',
									size: 12,
									h: 44,
									bg: '#eee',
									color: '#888'
							},
							actives:[vm.bindAreanindex],
							fixedOn: api.frameName
					}, function(ret, err) {
							if(ret.eventType == 'ok'){
										 vm.bindAreanindex = ret.selectedInfo[0].index
										 vm.city_id = ret.selectedInfo[0].id
										 vm.getInfo()
							}

				});
			},
			// 点击全部
			getAllOrder(){
				this.state='',
			  this.city_id= '',
				this.type= '',
				this.startTime= '',
				this.endTime= '',
				this.getInfo()
			}








   }



	});
}

</script>
</html>
